<template>
	<view>
		<scroll-view  class="page">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true" >
				<block slot="content">安全生产详情</block>
			</cu-custom>
		
		<view>
				<view class="itemArr-content"  @touchmove.stop>
						<view class="line-box">
						</view>
						<view class="item-title">
							请签字确认
						</view>
						<view class="content" :style="'height: '+sighHeight" @touchmove.stop="clearBubbling" @touchstart.stop="clearBubbling" @touchend.stop="clearBubbling">
							<view class="tips">
								请在指定框内横向签名
							</view>
							<sign ref="signRef" @init="onSignInit" :height="sighHeight" ></sign>
						</view>
						
						<view class="btns">
							<view class="btn" @click="clear">
								清除
							</view>
							<view class="btn" @click="saveImg">
								确定
							</view>
						</view>
						
					</view>
		</view>
		</scroll-view>
	</view>

</template>

<script>
	import {ACCESS_TOKEN} from '@/common/util/constants.js'
	import config from '../../common/service/config.service.js'
	let baseurl = config.apiUrl
	export default {
		components:{
		 },
		data() {
			return {
				sighHeight:'70vh',
				signUrl :'',
				signCtx : {},

			}
		},
		methods: {
			clearBubbling(e){
							return e.stopPropagation()
			},
			 onSignInit(signCtx) {
				this.signCtx = signCtx
			},
			clear() {
				this.signCtx.clear()
			},
			async saveImg(){
				if(!this.$refs.signRef.lineData.length) return this.setMessage('请输入签名')
				let tempFilePath = await this.signCtx.canvasToTempFilePath()
				console.log(tempFilePath);
				let formData = {
					biz: 'temp',
					// file : res.tempFilePaths[0]
				}
				uni.uploadFile({
					url: `${baseurl}/sys/common/upload`,
					filePath: tempFilePath,
					name: 'file',
					formData,
					header: {
						'X-Access-Token': uni.getStorageSync(ACCESS_TOKEN)
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						let data = JSON.parse(uploadFileRes.data)
						if(data.success){
							let path = data.message
							this.signUrl = path
							uni.$emit('handleSign',{signUrl: this.signUrl})
							uni.navigateBack({
								delta: 1,
							})
						}
					}
				})
			}
			
		},
		onLoad(){
			if(this.$Route.query.name){
				this.pageType = 2
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footContent{
			width: 750rpx;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(102, 102, 102, 0.05);
			border-radius: 50rpx 50rpx 0px 0px;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 36rpx;
			z-index: 10;
			.btn{
				width: 600rpx;
				height: 100rpx;
				background: #1890ff;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				color: #fff;
			}
		}
		
	.itemArr-content{
			height: calc( 100vh - 45px );
			// margin-top: 20rpx;
			width: 100%;
			background-color: #fff;
			padding-top: 1rpx;
			// padding-bottom: 20rpx;
			// padding-bottom: 500rpx;
			position: relative;
			.line-box{
				height: 20rpx;
				background-color: #f9f9f9;
				width: 100%;
			}
			.item-title{
				margin: 30rpx 50rpx 0;
				color: #333;
				font-weight: 600;
				position: relative;
				font-size: 32rpx;
				margin-bottom: 60rpx;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					left: -3%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 30rpx;
					background: #1890ff;
					border-radius: 4rpx;
				}
				margin-bottom: 39rpx;
			}
			.clearBtn{
				display: flex;
				align-items: center;
				position: absolute;
				top: 5%;
				right: 5%;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 13rpx;
				}
				color: #1890ff;
			}
			.content{
				width: 681rpx;
				height: calc( 60vh - 200rpx );
				background: #F7FAFC;
				border-radius: 20px;
				margin: 0 auto;
				position: relative;
				.tips{
					position: absolute;
					color: #B6B8D3;
					top: 5%;
					left: 5%;
				}
				
			}
			.btns{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 15rpx 0;
				.btn{
					// margin-top: 32rpx;
					width: 142rpx;
					height: 80rpx;
					background: #EDEDED;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;
					font-size: 32rpx;
					margin-right: 30rpx;
					&:nth-child(2){
						color: #fff;
						background-color: #1890ff;
						margin-left: 20rpx;
					}
				}
			}
	}
		
</style>
